<template>
  <div class="app-container pagePublic">
    <!--label-position:label对齐方式,inline行内表单-->
    <el-form ref="searchForm" :model="searchForm" :inline="true" :label-position="labelPosition" class="formPublic">
      <el-form-item label="接单员姓名">
        <el-input v-model="searchForm.personName" placeholder="请输入接单员姓名"/>
      </el-form-item>
      <el-form-item label="接单员工种">
        <el-input v-model="searchForm.jobName" placeholder="请输入接单员工种"/>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getList">查询</el-button>
        <el-button type="primary" @click="reset">重置</el-button>
        <!--<el-button type="success" icon="el-icon-edit" @click="addFrom">新增</el-button>-->
      </el-form-item>
    </el-form>
    <div class="table_box">
      <el-table
        :key="tableKey"
        v-loading="listLoading"
        :data="tableList"
        :height="tableHeight"
      >
        <el-table-column label="接单员姓名" align="center" property="name" show-overflow-tooltip/>
        <el-table-column label="接单员性别" align="center" property="sex" show-overflow-tooltip>
            <template slot-scope="scope">
                <span>{{scope.row.sex==1?'男':(scope.row.sex==2?'女':'')}}</span>
            </template>
        </el-table-column>
        <el-table-column label="接单员地址" align="center" property="cityIds" show-overflow-tooltip/>
        <el-table-column label="工种" align="center" property="jobName" show-overflow-tooltip/>
        <el-table-column label="完成数量" align="center" property="orderCount" show-overflow-tooltip>
           <template slot-scope="scope">
                 <span v-if="scope.row.orderCount">{{scope.row.orderCount}}</span>
                 <span v-else >0</span>
          </template>
        </el-table-column>
        <el-table-column label="接单数量" align="center" property="jdOrderCount" show-overflow-tooltip>
          <template slot-scope="scope">
                 <span v-if="scope.row.jdOrderCount">{{scope.row.jdOrderCount}}</span>
                 <span v-else >0</span>
          </template>
        </el-table-column>
        <el-table-column label="接单率" align="center"  show-overflow-tooltip>
          <template slot-scope="{row}">
            <span>{{jiedanlv(row.jdOrderCount,row.jjOrderCount)}}</span>
          </template>
        </el-table-column>
        <el-table-column label="一次审核通过率" align="center" property="onePassOrderCount" show-overflow-tooltip/>
        <el-table-column label="累计收入" align="center" property="sumCommission" show-overflow-tooltip/>
        <el-table-column label="注册时间" align="center" property="ctime" show-overflow-tooltip/>
         <el-table-column label="认证状态" align="center" property="ctime" show-overflow-tooltip>
             <template slot-scope=" scope ">
                  <span>{{scope.row.approve==1?'提交认证':(scope.row.approve==2?'通过认证':(scope.row.approve==3?'驳回认证':'未认证'))}}</span>
             </template>
         </el-table-column>
        <el-table-column label="操作" align="center" width="230">
          <template slot-scope="{row}">
            <!--<el-button type="primary" size="mini" @click="handleUpdate(row)">编辑</el-button>-->
            <el-button size="mini" type="success" @click="chakan(row)">订单</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(row)">注销</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <pagination v-show="total>0" :total="total" :page.sync="page" :limit.sync="limit" @pagination="getList"/>

    <!--新增/编辑-->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogFormVisible"
      width="1100px"
      :inline="true"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      :before-close="cancelForm"
      class="dialogPublic"
    >
      <el-form ref="dialogForm" :rules="rulesForm" :model="dialogForm" class="formPublic" style="display: flex">
        <div style="width:43%;display: inline-block;">
          <!-- <el-form-item label="头像:" prop="orderPhoto">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="(file)=>{return beforeAvatarUpload(file,dialogStatus,1)}"
            >
              <div class="imagehua" v-if="dialogForm.iocn">
                <img :src="$store.state.apiUrl + 'file/'+dialogForm.iocn" class="avatar"/>
              </div>
              <i
                v-else
                class="el-icon-plus avatar-uploader-icon imagehuaican"
              ></i>
            </el-upload>
            <div style="width: 360px;text-align:right;color:#606266;font-size: 12px;">照片大小不超过2M</div>
          </el-form-item> -->
          <el-form-item prop="name" label="姓名:">
            <el-input
              v-model="dialogForm.name"
              class="dialoginput"
              placeholder="请输入姓名"
              auto-complete="off"
            />
          </el-form-item>
           <el-form-item prop="sex" label="性别:">
            <el-input
              v-model="dialogForm.sex"
              class="dialoginput"
              placeholder="请输入性别"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="address" label="地址:">
            <el-input
              v-model="dialogForm.address"
              class="dialoginput"
              placeholder="请输入地址"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="phone" label="手机号码:">
            <el-input
              disabled
              v-model="dialogForm.phone"
              class="dialoginput"
              placeholder="请输入手机号码"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="account" label="账号:">
            <el-input
              disabled
              v-model="dialogForm.account"
              class="dialoginput"
              placeholder="请输入账号"
              auto-complete="off"
            />
          </el-form-item>
          <el-form-item prop="birthday" label="出生日期:">
            <el-date-picker
              v-model="dialogForm.birthday"
              type="date"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期">
            </el-date-picker>
          </el-form-item>
          <el-form-item prop="jobName" label="工种:">
            <el-input
              v-model="dialogForm.jobName"
              class="dialoginput"
              placeholder="请输入工种"
              auto-complete="off"
            />
            <span style="color:red">多个工种请用,隔开</span>
          </el-form-item>
        </div>
        <div style="width:50%;display: inline-block;">
          <!-- <el-form-item  label="公司名称:">
            <el-input
              v-model="dialogForm.companyName"
              class="dialoginput"
              placeholder="请输入公司名称"
              auto-complete="off"
            />
          </el-form-item> -->
          <el-form-item label="技能证书:" >
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="(file)=>{return beforeAvatarUpload(file,dialogStatus,2)}"
            >
              <div class="imagehua" v-for="(item,index) of dialogForm.photos" :key="index">
                <img :src="$store.state.apiUrl+'file/'+item" class="avatar"/>
                <div @click.stop class="imghua">
                  <i @click.stop="resertImg(index)" class="el-icon-delete"></i>
                </div>
              </div>
              <i
                v-show="dialogForm.photos.length<3"
                class="el-icon-plus avatar-uploader-icon imagehuaican"
              ></i>
            </el-upload>
            <div style="width: 360px;text-align:right;color:#606266;font-size: 12px;">照片大小不超过2M</div>
          </el-form-item>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer" style="text-align: center">
        <el-button type="primary" @click="dialogStatus=='add'?addData():updateData()">保存</el-button>
        <el-button @click="cancelForm">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="订单信息"
      :visible.sync="chakanVisible"
      width="75%">
      <div>
        <h4>进行中订单</h4>
        <ul class="dingdanul" v-if="going">
          <li v-for="item in goingdata">
            <!--<div v-if="scope.row.iocn ==''||scope.row.iocn ==null">-->
              <!--<img-->
                <!--src="./img/noData.jpg"-->
                <!--style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"-->
              <!--&gt;-->
            <!--</div>-->
            <img   src="@/static/img/paidan.png"  alt="">
            <!--<img v-else  :src="$store.state.apiUrl+'file/'+item.iocn"  alt="">-->
            <h5>{{item.orderName}}</h5>
            <p v-if="item.dayOut-0>0||item.dayOut-0==0">
              已施工<span style="color: greenyellow">{{item.dayOperation}}</span>天/剩余<span style="color: greenyellow">{{item.dayOut}}</span>天
            </p>
            <p v-else>
              已施工<span style="color: red">{{item.dayOperation}}</span>天/超期<span style="color: red">{{-item.dayOut}}</span>天
            </p>
            <p>
              {{item.commission}}元
            </p>
            <p>{{item.orderAddress}}</p>
          </li>
        </ul>
        <div class="nodata" v-else>
          暂无数据
        </div>
        <div class="divide">
        </div>
        <h4>已完成订单</h4>
        <ul class="dingdanul" v-if="over" style="height:185px;overflow: auto ">

          <li v-for="item in overdata" >
            <!--<div v-if="scope.row.iocn ==''||scope.row.iocn ==null">-->
            <!--<img-->
            <!--src="./img/noData.jpg"-->
            <!--style=" width: 60px;height: 60px;margin:0px 5px;display: inline-block;text-align: center"-->
            <!--&gt;-->
            <!--</div>-->
            <img   src="@/static/img/paidan.png"  alt="">
            <!--<img v-else  :src="$store.state.apiUrl+'file/'+item.iocn"  alt="">-->
            <h5>{{item.orderName}}</h5>
            <p v-if="item.dayOut-0>0||item.dayOut-0==0">
              <span style="color: greenyellow">正常完成</span>
            </p>
            <p v-else>
              <span style="color: red">逾期完成</span>
            </p>
            <p>
              {{item.commission}}元
            </p>
            <p>{{item.orderAddress}}</p>
          </li>
        </ul>
        <div class="nodata" v-else>
          暂无数据
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import axios from 'axios'
  import {
    orderClientData,
    orderClerkData,
    orderList,
    uploadFile,
    orderAdd,
    orderRowList,
    orderUpdate,
    orderRelease,
    orderDelete,
    UserList,
    UserAdd,
    UserDel,
    UserUpdata
  } from '@/api/article'
  /* import waves from '@/directive/waves' // waves directive*/
  /* import { parseTime } from '@/utils'*/
  import Pagination from '@/components/Pagination' // secondary package based on el-pagination

  export default {
    name: 'notRelease',
    components: {Pagination},
    /*  directives: { waves },*/
    data() {
      return {
        going:false,
        goingdata:[],
        over:false,
        overdata:[],
        chakanVisible:false,//查看
        /** **********数组***********/
        orderClientData: [], // 所属客户数组
        orderClerkData: [], // 接单人员数组
        /** **********数组结束***********/
        labelPosition: 'right', // el-form的label对齐方式
        /** **********查询**********/
        searchForm: {
          personName: '',// 接单员
          jobName:'',//工种
        },
        /** **********查询结束**********/
        /** **********table**********/
        tableList: [], // 页面table数据
        listLoading: true, // 加载
        tableHeight: window.screen.availHeight - 380, // table高度
        tableKey: 0,
        isDisabled: false,
        /** **********table结束**********/
        /** **********分页**********/
        total: 0,
        page: 1,
        limit: 10,
        /** **********分页结束**********/
        /** **********新增**********/
        startTimeOptions: {
          // 开始时间限制
          disabledDate: function (date) {
            return date > new Date(this.dialogForm.endDate)
          }.bind(this)
        },
        endTimeOptions: {
          // 结束时间限制
          disabledDate: function (date) {
            return date < new Date(this.dialogForm.startDate)
          }.bind(this)
        },
        dialogVisibleImg: false,
        dialogImageUrl: '',
        dialogTitle: '新增',
        dialogFormVisible: false,
        dialogStatus: 'add',
        dialogForm: {
          id:'',
          iocn: '',
          name: "",
          sex:'',//性别
          address:'',//地址
          phone: "",
          account: "",
          birthday: "",
          jobName: "",
          companyName: "",
          photos:[],//技能证书
        },
        rulesForm: {
          name: [
            {required: true, message: '请输入姓名', trigger: 'blur'}
          ],
           sex: [
            {required: true, message: '请输入性别', trigger: 'blur'}
          ],
           address: [
            {required: true, message: '请输入地址', trigger: 'blur'}
          ],
          phone: [
            {required: true, message: '请输入手机号码', trigger: 'blur'},
            {validator:this.validPhone, trigger: 'blur'}
          ],
          account: [
            {required: true, message: '请输入账号', trigger: 'blur'}
          ],
          birthday: [
            {required: true, message: '请选择出生日期', trigger: 'blur'}
          ],
          jobName: [
            {required: true, message: '请输入工种', trigger: 'blur'}
          ],
          companyName: [
            {required: true, message: '请输入公司名称', trigger: 'blur'}
          ],
        },
        /** **********新增结束**********/
      }
    },
    created() {

    },
    mounted() {
      this.getList();
      this.initArray();
    },
    methods: {
      jiedanlv(all,cnot){
        let theall,thecnot
        if(all==null||all==""){
          theall=0
        }else {
          theall=all
        }
        if(cnot==null||cnot==""){
          thecnot=0
        }else {
          thecnot=all
        }
        if(theall==0){
          return "未有接单记录"
        }
        return theall/(theall+thecnot)+"%"
      },
      /** **************接单员+所属客户***************/
      initArray() {
        this.orderClientData = [] // 所属客户数组
        this.orderClerkData = [] // 接单人员数组
        orderClientData({}).then(res => {
          console.log('jie4dan', res)
          if (res.code == 1) {
            this.orderClientData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
        orderClerkData({}).then(res => {
          if (res.code == 1) {
            this.orderClerkData = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      /** **************接单员+所属客户结束***************/
      /** **************查询***************/
      getList() {
        this.listLoading = true
        UserList({
          name: this.searchForm.personName == '' ? null : this.searchForm.personName,//接单员名称
          jobName:this.searchForm.jobName,
          pageNum: this.page,
          pageSize: this.limit
        }).then(res => {
          if (res.code == 1) {
            this.tableList = res.data.list
            this.total = res.data.total
            this.listLoading = false
          } else {
            this.$message.error(res.msg)
          }
        })
      },
      /** **************查询结束***************/

      /** **************重置***************/
      reset() {
        this.searchForm = {
          personName: '',// 接单员
          jobName:'',//工种
        }
        this.getList()
      },
      /** **************重置结束***************/

      /** **************新增***************/
      //上传技能证书图片
      handleAvatarSuccess(file) {
        this.dialogForm.photos = URL.createObjectURL(file.raw);
     },
      beforeAvatarUpload(file, dialogStatus,index) {
        const isJPG = file.type === "image/jpeg";
        const isPNG = file.type === "image/png";
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isJPG && !isPNG) {
          this.$message.error("上传图片只能是JPG格式或者PNG格式!");
          return;
        }
        if (!isLt2M) {
          this.$message.error("上传图片大小不能超过 2MB!");
          return;
        }
        if (file) {
          let fileData = new FormData()
          fileData.append('file', file)
          uploadFile(fileData).then(res => {
            if (res.code == 1) {
              const fileImg = res.data.url
              this.dialogForm.photos.push(fileImg)
            } else {
              this.$message({
                type: 'error',
                message: '图片上传失败'
              })
            }
          })
        }
        return false
      },
      resertImg(index) {
        this.dialogForm.photos.splice(index, 1)
      },
      // 弹出dialog
      addFrom() {
        this.dialogStatus = 'add'
        this.dialogTitle = '新增'
        this.dialogFormVisible = true
        this.dialogForm = {
          id:"",
          iocn: '',
          name: "",
          sex:'',
          address:'',
          phone: "",
          account: "",
          birthday: "",
          jobName: "",
          companyName: "",
          photos: []
        }
      },
      // 保存
      addData() {
        this.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            UserAdd({
              type: 0,
              iocn: this.dialogForm.iocn,
              name: this.dialogForm.name,
              sex:this.dialogForm.sex=='男'?1:(this.dialogForm.sex=='女'?2:''),
              cityIds:this.dialogForm.address,
              phone: this.dialogForm.phone+"",
              account: this.dialogForm.account,
              birthday: this.dialogForm.birthday+' 00:00:00',
              jobName: this.dialogForm.jobName,
            //  companyName: this.dialogForm.companyName,
              skills:this.dialogForm.photos.length==0?'':this.dialogForm.photos.join(','),//技能证书
            }).then(res => {
              if (res.code == 1) {
                this.cancelForm();
                this.reset();
                setTimeout(() => {
                  this.$message({
                    type: 'success',
                    message: '新增成功'
                  })
                }, 500)
              }
            })
          }
        })
      },
      // 关闭dialog
      cancelForm() {
        this.dialogFormVisible = false
        this.$refs.dialogForm.resetFields()
        this.$refs.dialogForm.clearValidate()
      },
      // 保存dialog
      /** **************新增结束***************/
      chakan(row){
        this.chakanVisible=true
        orderList({
          status:4,//施工中订单
          clUserId:row.id,//订单名称
        }).then(res => {
          if (res.code == 1) {
            this.goingdata=res.data.list
            if(res.data.list.length>0){
              this.going=true
            }else {
              this.going=false
            }
          }
        })
        orderList({
          status:6,//施工中订单
          clUserId:row.id,//订单名称
        }).then(res => {
          if (res.code == 1) {
            this.overdata=res.data.list
            if(res.data.list.length>0){
              this.over=true
            }else {
              this.over=false
            }
          }
        })
      },
      /** **************编辑***************/
      handleUpdate(row) {
        console.log(row);
        this.dialogStatus = 'update'
        this.dialogTitle = '修改'
        this.dialogFormVisible = true
        this.dialogForm = {
          id:row.id,
          iocn: row.iocn,
          name: row.name,
          sex:row.sex==1?'男':(row.sex==2?'女':''),
          address:row.cityIds,
          phone: row.phone,
          account: row.account,
          birthday: row.birthday,
          jobName: row.jobName,
         // companyName: row.companyName,
          photos:(row.skills==null||row.skills=='')?[]:row.skills.split(','),//技能证书
        }
      },
      updateData() {
        this.$refs['dialogForm'].validate((valid) => {
          if (valid) {
            UserUpdata({
              type: 0,//未发布订单
              id: this.dialogForm.id,
              iocn: this.dialogForm.iocn,
              name: this.dialogForm.name,
              sex:this.dialogForm.sex=='男'?1:(this.dialogForm.sex=='女'?2:''),
              age:this.dialogForm.age,
              cityIds:this.dialogForm.address,
              phone: this.dialogForm.phone+"",
              account: this.dialogForm.account,
              birthday: this.dialogForm.birthday+' 00:00:00',
              jobName: this.dialogForm.jobName,
             // companyName: this.dialogForm.companyName,
              skills:this.dialogForm.photos.length==0?'':this.dialogForm.photos.join(','),//技能证书
            }).then(res => {
              if (res.code == 1) {
                this.cancelForm();
                this.reset();
                setTimeout(() => {
                  this.$message({
                    type: 'success',
                    message: '修改成功'
                  })
                }, 500)
              }
            })
          }
        })
      },
      /** **************编辑结束***************/


      /** **************删除***************/
      handleDelete(row) {
        this.$confirm('是否确认注销接单员“' + row.name + '”？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          UserDel(row.id).then(res => {
            if (res.code == 1) {
              this.$message({
                type: 'success',
                message: '注销成功'
              })
              this.reset()
            } else {
              this.$message.error(res.msg)
            }
          })
        }).catch(() => {
        })
      },
      /** **************删除结束***************/
      /** **************校验***************/
      validPhone(rule, value, callback) {
        var re = /^1[0-9]{10}$/;
        if (value && !re.test(value)) {
          callback(new Error('请输入正确格式的手机号'));
        } else {
          callback();
        }
      },
    }
  }
</script>
<style scoped lang="scss">
  .imagehua {
    position: relative;
    width: 120px;
    height: 120px;
    float: left;

    &:hover .imghua {
      display: block;
    }

    img {
      width: 100% !important;
      height: 100% !important;
    }

    .imghua {
      position: absolute;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      top: 0;
      display: none;

      i {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }

  .imagehuaican {
    float: left;
    width: 120px;
    height: 120px;
    position: relative;

    &::before {
      position: absolute;
      left: 50%;
      height: 50%;
      transform: translate(-50%, -50%);
    }
  }
  .dingdanul{
    display: flex;
    flex-wrap: wrap;
    li{
      margin-top: 10px;
      padding: 0 5px;
      width: 24%;
      height: 85px;
      border-right: 1px solid #eee;
      img{
        width: 70px;
        height: 80px;
        float: left;
        margin-right:10px ;
      }
      h5{

      }
      p{
        margin-top: 10px;
        font-size:6px;
        color:rgba(51,51,51,1);
      }
    }
  }
  .nodata{
    width: 100%;
    height: 70px;
    text-align: center;
    line-height: 70px;
  }
  .divide{
    width: 100%;
    height: 1px;
    background: #eee;
    margin: 40px 10px 10px;
  }
</style>
